<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					{{title}}
				</view>
				<view class="uni-list-cell-db">
					<picker class="pickerBox" @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{ array[index] }}</view>
						<view class="icon">
							<image class="downArrow" src="../../static/image/repair-position/down-arrow.png"></image>
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				pickName: ""
			};
		},
		methods: {
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value);
				this.index = e.detail.value;
				this.pickName = this.array[e.detail.value];
				this.$emit("picker", this.pickName)
			},
		},
		props: {
			array: {
				type: Array,
				default: function() {
					return []
				}
			},
			title: {
				type: String,
				default: ""
			}
		}

	};
</script>

<style lang="scss">
	.uni-list {
		padding: 20px;
		color: #ffb612;
		border-bottom: 1px solid #ccc;


		.uni-list-cell {
			display: flex;
			align-items: center;

			.uni-list-cell-left {
				flex: 2;
				font-size: 18px;
			}

			.uni-list-cell-db {
				flex: 4;
				display: flex;
				align-items: center;

				.pickerBox {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.uni-input {
						display: inline-block;
						padding: 10px;
						border-radius: 5px;
						text-align: center;
						font-size: 16px;
					}

					.icon {
						position: fixed;
						right: 0;
						margin-right: 50rpx;
						display: inline-block;
						.downArrow {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}



			}


		}
	}
</style>
